<template>
    <div class="container-fluid" style="background: #fff">
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>{{(type==1?'多':'单')+'视频'}}</h1>
            </div>
            <div class="col-xs-1">
                <a title="添加"  @click="detail('')">
                  <el-tooltip content="添加" placement="top">
                    <i class="el-icon-plus"></i>
                  </el-tooltip>
                </a>
            </div>
        </div>
        <el-col :span="24" class="table-bottom-margin">
            <el-table :data="tableData" border style="width: 100%" :header-cell-class-name="headerbg">
                <el-table-column prop="Title" label="名称"></el-table-column>
                <el-table-column prop="PeopleNum" label="浏览人数"> </el-table-column>
                <el-table-column prop="PersonTime" label="浏览人次"> </el-table-column>
                <el-table-column prop="ShareTime" label="分享次数"> </el-table-column>
                <el-table-column label="操作" align="center" min-width="40" width="250px">
                    <template slot-scope="scope">
                        <el-tooltip content="编辑" placement="top">
                            <i class="fa fa-edit el-text-blue" @click="detail(scope.row.Id)"></i>
                        </el-tooltip>&nbsp;&nbsp;&nbsp;&nbsp;              
                    </template>
                </el-table-column>
            </el-table>    
        </el-col>
        <el-col :sapn="24" style="text-align:right" v-if="count>0">
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
                :page-sizes="[10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </el-col>
        <br/>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                currentPage:1,
                pageSize:10,
                count:0,
                headerbg:'headerbg',//表格头部背景色
                
                tableData:[],
                getListUrl:this.urlConfig+'/api/VideoManage/GetVideoList',
            }
        },
        props:{
            type:''
        },
        components: {
        },
        mounted() {
            this.getList(10,this.currentPage);
        },
        methods:{
            getList:function(PageSize,PageIndex){
                this.$http.get(this.getListUrl+'?PageSize='+PageSize+'&PageNo='+PageIndex+'&VideoType='+this.type,{
                    emulateJSON:true
                }).then(function(res){
                    this.count = 0;
                    this.tableData = [];
                    if(res.body["Code"] == "200") {
                        this.count = res.body.Count;
                        this.tableData = JSON.parse(res.body.Data);
                    }
                });
            },
            detail:function(id){
                this.$router.push({ path: '/Video/EditSingleVideo' ,query: { id: id, type: this.type} });
            },
            pageSizeChange:function(val){
                this.pageSize = val;
                this.getList(val,this.currentPage);
            },
            pageCurrentChange:function(val){
                this.currentPage = val;
                this.getList(this.pageSize,val);
            }
        }
    }
</script>
<style>
    .headerbg{
        background-color: #f4f3f3 !important;
    }
</style>
